<template>
	<view class="paryorder-content">
		<z-paging ref="pagingRef" v-model="dataList" 	 @query="queryList" :fixed="false" @scroll="pageScrollFn" @onRefresh="onRefreshFn" :auto="false">
			<template #top>
			<view class="navbar-header u-p-b-20" >
				<view class="status_bar"  :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="u-flex u-row-between shop-list">
					<view >
						<!-- 未登录 -->
						<view class="u-flex " v-if="!storeUser.id">
							<image src="/static/common/logo.png" class="u-m-r-20" style="width: 56rpx;height: 56rpx;border-radius: 50%;" mode=""></image>
							<view class="title" @click="$mRouter.push({ route: '/pages/login/index' })">登录</view>
							<view style="margin-left: 10rpx;"><fui-icon name="arrowright" size="35" color="#000000"></fui-icon></view>
						</view>
						<!-- 店铺列表 --> 
						<view class="u-flex " v-else-if="dropDownShopList.length != 0">
							<image :src="storeShop.logoUrl?storeShop.logoUrl:'https://cdn.shan-niang.com/shops/mendiantouxiang.png'" mode="" class="shop-logo"></image>
							<fui-dropdown-menu class="drop-item" :isCheckbox="false" selectedColor="#FF2B2B" splitLine :options="dropDownShopList"
								ref="ddmTag" @click="e=>switchShop(e.id,'/pages/index/index')"  size="28" minWidth="400" isFull >
								<view class="u-flex fui-flex__between" @tap="tagTap">
									<text class="u-font-34">{{hideLongStr(storeShop.name)}}</text>
									<view class="fui-filter__icon" :class="{'fui-icon__ani':tagShow}">
										<fui-icon name="arrowdown" :size="42"></fui-icon>
									</view>
								</view>
							</fui-dropdown-menu>
						</view>
						<!-- 登录后无店铺 -->
						<view class="left u-flex" v-else>
							<image :src="storeUser.headImg?storeUser.headImg:'https://cdn.shan-niang.com/shops/wotouxiang.png'"
							 style="width: 56rpx;height: 56rpx;border-radius: 50%;box-shadow: 0px 0px 18px 2px rgba(8,1,3,0.1);" mode=""></image>
							<view class="title u-m-l-10">{{ storeUser.nickname }}</view>
						</view>
					</view>
					<!-- 右侧消息、扫码、分类图标 -->
					<view class="u-flex u-row-between" style="z-index: 999;">
						<!-- #ifdef APP -->
							<view class="u-m-r-20" @click="loginByScan" v-if="storeUser.id">
								<image src="/static/home/icon_scan.png" class="header-icon" mode=""></image>
							</view>
						<!-- #endif -->
						<!-- <header-xiaoxi v-if="storeUser.id&&dropDownShopList.length != 0" :number="2" route="/pages/public/xiaoxi/index" style="margin-right: 20rpx;"/> -->
						<view class="" @click.stop="$mRouter.push({ route: '/pages/index/fenlei' })">
							<image src="/static/home/icon_fenlei.png" class="header-icon" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class=" u-p-l-35 u-p-r-35">
					<view class="mp-search-box " @click="$mRouter.push({ route: '/pages/index/search' })">
						<fui-icon name="search" :size="38" color="#BBBBBB" style="width: 38rpx;position: absolute; top: 16rpx; left: 22rpx;z-index: 999;"></fui-icon>
						<text class="ser-input u-font-28" style="color: #BBBBBB;">伏特加</text>
					</view>
				</view>
				<!-- 背景图 -->
				<image src="/static/home/beijing.png" style="width: 172rpx;height: 100%;position: absolute;right:0;top:0;" mode=""></image>
			</view>
			</template>
			 <!-- 自定义下拉刷新view -->
			<template #refresher="{refresherStatus}" style="height: 200rpx;">
				<view>
					<image src="/static/home/refreshLoading.gif" mode="heightFix" style="height: 100rpx;margin: 0 auto;display: block;"></image>
					<view class="u-text-center u-font-26">{{statusTextArr[refresherStatus]}}</view>
				</view>
				
			</template>
			<!-- 自定义没有更多数据view -->
			<template #loadingMoreNoMore>
				<view class="u-flex u-col-center u-row-center">
					<fui-divider dividerColor="#DFDFDF" >
						<view class="u-flex u-m-l-30 u-m-r-30" style="flex-direction: column;align-items: center;">
							<image src="/static/home/noMore.png" mode="heightFix" style="height:50rpx;margin: 0 auto;display: block;"></image>
							<text class="u-font-10 u-m-t-6" style="color:#999">没有更多了</text>
						</view>
					</fui-divider>
				</view>
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="payorder-container u-m-t-20"  >
				<!-- 轮播图 -->
				<banner :key="storeShop.id+'banner'"></banner>
				<!-- 活动 -->
				<shop-list :shopId="storeShop.id" :key="storeShop.id+'shpplist'"></shop-list>
			</view>
			<!-- <view class="u-m-t-20">
				<fui-waterfall ref="waterfall" v-if="dataList.length!=0" leftGap="30" rightGap="30">
					<fui-waterfall-item v-for="(data,index)  in dataList" :key="index" >
						<lazy-item :item="data"></lazy-item>
					</fui-waterfall-item>
				</fui-waterfall> 
			</view> -->
			<view class="u-p-30">
				<u-waterfall v-if="dataList.length!=0" v-model="dataList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<lazy-item :InitData="leftList"></lazy-item>
					</template>
					<template v-slot:right="{rightList}">
						<lazy-item :InitData="rightList"></lazy-item>
					</template>
				</u-waterfall>
			</view>
			<template #bottom>
				<fui-tabbar :tabBar="tabbar" :isFixed="false" :isShowHome="true"></fui-tabbar>
			</template>
		</z-paging>
		<!-- 购物车浮动按钮 -->
		<view :class="['shop-cart-container',transformClass?'shop-cart-active':'']" v-if="dropDownShopList.length != 0" @click="goShopCartFn">
			<fui-icon name="cart" style="font-size: 60rpx;font-weight: bold;"></fui-icon>
		</view>
		<!-- #ifdef APP-PLUS  -->
		<!-- 检查更新 -->
		<!-- <check-update></check-update> -->
		<!-- #endif -->
		<!-- 无网络 -->
		<!-- <u-no-network></u-no-network> -->
	</view>
</template>

<script>
	import SnWaterfall from '@/components/sn-waterfall.vue';
	import Banner from './banner.vue';
	import LazyItem from './ItemList.vue';
	import ShopList from './ShopList.vue';
	// import HeaderXiaoxi from '@/components/header-xiaoxi/index.vue';
	// import CheckUpdate from '@/components/check-update/index.vue'
	// import {hex_md5,hex_hmac_md5} from '@/utils/md5.js'
	import {useUserStore} from '@/store/user.js';
	import {useShopStore} from '@/store/shop.js';
	import {useCommonStore} from '@/store/common.js';
	
	import { mapState } from 'pinia'
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		mixins: [ZPMixin],
		computed:{
			 ...mapState(useShopStore, {
				  storeShop: 'shop',
				  shopLogin:'login',
				  dropDownShopList(store){
					  const res = store.shopList
					  if (!res) return
					  let arr = []
					  for (let i = 0; i < res.length; i++) {
					  	arr.push({
					  		text: res[i].name,
					  		id: res[i].id
					  	})
					  }
					  return arr
				  },
			}),
			...mapState(useUserStore, {
				  storeUser: 'user',
				  updateInfo:'updateInfo',
				  tabbar:'tabbar',
				  isPurchase:'isPurchase'
			}),
			...mapState(useCommonStore,['OPRN_TABBAR_ALL'])
		},
		components:{
			LazyItem,Banner,ShopList,SnWaterfall
			//Banner,Action,LazyItem,HeaderXiaoxi,ShopList,CheckUpdate
		},
		onLoad() {
			console.log(this.$mRouter);
		},
		data() {
			return {
				dataList: [],
				titleStyle: {
					position: 'absolute',
				},
				timer:null,
				transformClass:false,
				statusTextArr: {
					'default':'哎呀，用点力继续下拉！',
					'release-to-refresh':'拉疼我啦，松手刷新~~',
					'loading':'正在努力刷新中...',
					'complete':'刷新成功啦~'
				},
				loadTabbar:'reload-home-tabbar-guid',
				tagShow:false,
			}
		},
		onReady(){
			this.$refs.pagingRef.reload(); 
		},
		async onShow() {
			uni.hideTabBar()
			// #ifdef APP-PLUS 
			uni.onNetworkStatusChange(async (res) => {//检查网络波动
				if (res.isConnected) {
					await this.getShopList();
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			});
			//#endif 
			// 判断如果用户登录并且有企业的话  请求消息数量角标
			if(this.storeUser.id&&this.dropDownShopList.length != 0){
				// await this.$store.dispatch('shop/getMessageNum');
			}
		},
		methods: {
			tagTap() {
				this.$refs.ddmTag.show()
				this.tagShow = true;
			},
			hideLongStr(value, length = 10) {
				if (!value) return
				if (value.length < length) return value
				return value.substr(0, length) + '...'
			},
			// 下拉刷新 顺便刷新权限 和 用户信息 
			async onRefreshFn(){
				this.dataList = [];
				// this.$refs.waterfall.resetLoadmore();
				this.$refs.uWaterfall.clear();
				// 用户已登录的话，就更新用户信息；
				if (uni.getStorageSync('access_token')) {
					let isRealPeople = this.storeUser.realPeopleConfirmed;//用户是否已实名；
					if(!isRealPeople){
						const userInfo = await this.$newHttp.get('api/User/GetUserClaim');
						if(userInfo.code === 200){
							this.updateInfo(userInfo.data);
						}else{
							uni.$fui.toast('更新用户信息失败');
						}
					}
					const res = await this.$newHttp.get('api/User/GetShopsByUser');
					if(res.code ===200){
						this.shopLogin(res.data)
						this.updateMenuFn('');
					}else{
						uni.$fui.toast('刷新账号店铺列表失败');
					}
				}
			},
			// 更新权限按钮
			async updateMenuFn(shopId){
				this.loadTabbar = uni.$fui.guid(16);
				this.OPRN_TABBAR_ALL();
			},
			// 点击扫码登录
			loginByScan(){
				let that = this;
				uni.scanCode({
					success: async (res) => {
						let signKey = '9B007D549195C034C9A1C3E46AE581A72BC9A54BEDC7E36EBEE2834B58C6BC85';
						let qrdata = res.result;
						let openId = that.storeUser.idsOpenId
						let option = {
							qrdata:res.result,
							openId:that.storeUser.idsOpenId,
							sign:hex_md5(`${qrdata}&${openId}&${signKey}`)
						}
						await this.$nextTick();
						setTimeout(() => {
							that.toScanLogin(JSON.stringify(option));
						},800)
					},    
					error:(Error)=>{
						console.log(Error);
					}
				});
			}, 
			// 滚动隐藏购物车
			pageScrollFn(){
				this.transformClass = true; //要添加的class类名
				clearTimeout(this.timer);//这里必须要每次滚动前 清除一次
				// 如果停留则表示滚动结束  一旦空了1s就判定为滚动结束
				this.timer = setTimeout(() => {
				  this.transformClass = false //滚动结束清除class类名
				}, 1500);
			},
			// 前往购物车
			goShopCartFn(){
				if(!this.transformClass){
					if (!this.isPurchase) {
						return uni.$fui.toast('该账号没有查看购物车的权限');
					}else{
						uni.navigateTo({ 
							url: '/pages/cart/index',
						});
					};  
				};
				this.transformClass = false;
			},
			// 没有登录的话切换tabbar到登录页
			beforeSwitch(index){
				if ((!this.storeUser.hasLogin)&&index == 1) {
					uni.navigateTo({
						url: '/pages/login/index',
					})
				}else{
					return true;
				}
			},
			// 上拉加载更多
			async queryList(pageNo, pageSize,type) {
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				
				const res = await this.$newHttp.get('api/v1.2/ShanNiang/GetItemsPage', { params: params } );
				uni.hideLoading({
					title: 'loading...'
				})
				if(res.code === 200){
					// if(type === "user-pull-down"){
					// 	this.dataList.splice(0,this.dataList.length)
					// }
					this.$refs.pagingRef.complete(res.data.list);
				}else{
					this.$refs.pagingRef.complete(false);
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.drop-item{
		position: absolute;
		left: 0;
		padding-left: 100rpx;
		::v-deep .u-dropdown__menu__item{
			justify-content: flex-start;
			box-sizing: border-box;
			padding-left: 100rpx;
		}
		::v-deep .u-dropdown__content__popup{
			height: 600rpx;
			width: 100%;
			.u-dropdown-item{
				width: 100%;
			}
		}
	}
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.paryorder-content {
		height: 100%;
		
	}
	.payorder-container{
		// background-color: #fff;
		box-sizing: border-box;
		padding: 0 30rpx;
		.payorder-header{
			display: flex;
			justify-content: space-between;
		}
		.payorder-section{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx 0;
			border-bottom: solid 1px #eaeaea;
			.section-image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.section-list{
				flex: 1;
				margin-left: 20rpx;
				
				.section-item{
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					.section-btn{
						width: 100rpx;
						margin: 0;
						height: 50rpx;
					}
				}
			}
			
		}
		
	}
	.navbar-header {
		width: 100%;
		background-color: #ffbb1a;
		font-size: 36rpx;
		font-weight: 500;
		z-index: 999;
		color: #000000;
		position: relative;
		box-shadow: 0px 0px 18px 2px rgba(8,1,3,0.15);
		.shop-list{
			padding-left: 35rpx;
			padding-right: 35rpx;
			padding-bottom: 35rpx;
			position: relative;
			width: 100%;
			/* #ifdef H5 */
			padding-top: 38.5rpx;
			/* #endif */
			z-index: 999;
			.header-icon{
				width: 44rpx;
				height: 44rpx;
			}
		}
		.shop-logo{
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
			box-shadow: 0px 0px 18px 2px rgba(8,1,3,0.1);
			background-color: #fff;
		}  
		.navbar-content {
			display: flex;
			justify-content: space-between;
			height: 88rpx;
			align-items: center;
			.right {
				display: flex;
				justify-content: space-between;
				.rigth-icon {
					margin-left: 20rpx;
				}
			}
		}
	}
	.status_bar {
		/* height: var(--status-bar-height); */
		width: 100%;
	}
	.mp-search-box{
		position: relative;
		z-index: 20;
		height: 70rpx;
		border-radius: 70rpx;
		background: #F5F5F5;
		.ser-input{
			margin-left: 67rpx;
			height: 71rpx;
			line-height: 70rpx;
		}
	}
	.shop-cart-container{
		position: fixed;
		bottom: 200rpx; 
		right: 14rpx; 
		width: 120rpx; 
		height: 120rpx; 
		z-index:13;
		border-radius: 50%; 
		background-color: #FFBB1A;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 0px 18px 2px rgba(6,0,1,0.1);
		transition: all 0.5s ease;
	}
	.shop-cart-active{
		right: -60rpx;
		opacity:0.4;
		transition: all 0.5s ease;
	}
</style>
 